<template>
  <div class="main-message">
    <el-card class="message">
      <el-container>
        <el-aside width="250px">
          <div class="aside-title">消息</div>
          <!--联系人列表-->
          <div class="aside-contacts">
            <Contacts
              :contacts="item"
              v-for="(item, index) in contacts"
              :key="index"
              :class="{active : currentContacts === item}"
              @click.native="selectContacts(item)"
            />
          </div>
        </el-aside>
        <!--聊天区域-->
        <el-main>
          <div class="main-nickname">{{ currentContacts.nickname }}</div>
          <!--聊天内容-->
          <div class="main-content" ref="msg" v-loading="loading">
            <div v-for="(msg, index) in msgList" :key="index">
              <Msg :msg="msg" :avatar="msgAvatar(msg.sender)"/>
            </div>
          </div>
          <!--聊天输入框-->
          <div class="main-input">
            <!--emoji&图片-->
            <div>
              <el-upload
                action="http://localhost:8082/sendImg"
                :before-upload="beforeUpload"
                :data="this.newMsg"
                :show-file-list="false"
                :on-success="onsuccess"
                style="display:inline-block;"
              >
                <i class="el-icon-picture-outline"></i>
              </el-upload>
              <i class="el-icon-emoji" v-popover:popover></i>
              <el-popover
                ref="popover"
                placement="top-start"
                width="200"
                trigger="click">
                <div class="input-emoji">
                  <emoji v-for="index in 30" :key="index" :name="index" @click.native="addEmoji(index)"/>
                </div>
              </el-popover>
            </div>
            <!--文字-->
            <!--<textarea-->
            <!--  aria-label="input"-->
            <!--  class="main-input-text"-->
            <!--  v-model="input"-->
            <!--&gt;-->
            <!--</textarea>-->
            <div
              contenteditable="true"
              class="main-input-text"
              ref="input"
              @input="input = $refs.input.innerHTML"
            >
            </div>
            <!--<Edit v-model="input"/>-->
            <!--发送按钮-->
            <div style="display: flex;justify-content: flex-end;align-items: center;">
              <div class="limit">{{ input.length }}/2500</div>
              <div
                class="main-input-button"
                :class="{
              'main-input-button-active' : input && input.length <= 2500
            }"
                @click="send"
              >发送
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import Contacts from '@/views/message/components/Contacts'
import Msg from '@/views/message/components/Msg'
import { getContacts, getCurrentMsg, sendMsg } from '@/api/chat'
import { getId } from '@/utils/auth'
import Emoji from '@/components/Emoji'

export default {
  components: {
    Emoji,
    Msg,
    Contacts
  },
  data () {
    return {
      contacts: [],
      currentContacts: {},
      msgList: [],
      input: '',
      newMsg: {
        sender: '',
        receiver: '',
        content: ''
      },
      loading: false
    }
  },
  created () {
  },
  async mounted () {
    await this.getContacts()
    if (this.contacts[0]) {
      this.currentContacts = this.contacts[0]
      this.selectContacts(this.contacts[0])
    }
  },
  methods: {
    // 获取联系人
    async getContacts () {
      const res = await getContacts(getId())
      this.contacts = res.contacts
    },
    // 获取当前联系人的聊天记录
    async getCurrentMsg () {
      const res = await getCurrentMsg(getId(), this.currentContacts.userId)
      this.msgList = res.msgList
      this.loading = true
      await setTimeout(() => {
        this.loading = false
        this.$refs.msg.scrollTop = 10000
      }, 300)
    },
    // 选择联系人
    selectContacts (contacts) {
      this.currentContacts = contacts
      this.currentContacts.unread = 0
      this.getCurrentMsg()
    },
    // 发送消息
    async send () {
      if (!this.input || this.input.length >= 2500) {
        return false
      }
      this.newMsg.sender = getId()
      this.newMsg.receiver = this.currentContacts.userId
      this.newMsg.content = this.input
      const res = await sendMsg(this.newMsg)
      if (res.code === 200) {
        await this.getCurrentMsg()
        this.input = ''
        this.$refs.input.innerHTML = ''
      }
    },
    // 发送图片之前处理
    beforeUpload () {
      this.newMsg.sender = getId()
      this.newMsg.receiver = this.currentContacts.userId
      this.newMsg.content = '[图片]'
    },
    // 发送图片成功
    async onsuccess () {
      await this.getCurrentMsg()
      this.input = ''
      this.$refs.input.innerHTML = ''
    },
    // 消息头像
    msgAvatar (id) {
      if (id.toString() === getId()) {
        return this.$store.getters.avatar
      } else {
        return this.currentContacts.avatar
      }
    },
    // 输入表情
    addEmoji (name) {
      this.input += ('<img class="emoji-in-text" src="http://127.0.0.1:8082/i_f' + name + '.png" alt=""/>')
      this.$refs.input.innerHTML += ('<img class="emoji-in-text" src="http://127.0.0.1:8082/i_f' + name + '.png" alt=""/>')
    }
  }
}
</script>

<style scoped lang="less">
.main-message {
  background: url('../../assets/background/bilibili_background.png')top/cover no-repeat fixed;
  min-height: calc(100vh - 80px);
  padding: 15px 0;
}

.input-emoji {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
}

.message {
  width: 900px;
  height: 638px;
  margin: 0 auto;

  .el-aside {
    height: 638px;
    border-right: 1px solid @borderBase;

    .aside-title {
      padding: 10px;
      height: 21px;
      border-bottom: 1px solid @borderBase;
    }

    .aside-contacts {
      height: 596px;
      //display: flex;
      //flex-direction: column;
      overflow: hidden;

      .active {
        background-color: @gray-p;
      }
    }

    .aside-contacts:hover {
      overflow: auto;
      overflow-x: hidden;
    }
  }

  .el-main {
    height: 638px;
    padding: 0;

    .main-nickname {
      padding: 10px;
      height: 21px;
      border-bottom: 1px solid @borderBase;
      text-align: center;
    }

    .main-content {
      height: 375px;
      background-color: @background_deep;
      overflow: scroll;
      overflow-x: hidden;
      padding: 10px;
    }

    .main-input {
      height: 180px;
      padding: 10px 20px;
      background-color: @background_deep;
      border-top: 1px solid @borderBase;

      i {
        font-size: 28px;
        color: @menuText_gray;
        margin-right: 10px;
      }

      i:hover {
        cursor: pointer;
        color: @menuColor;
      }

      textarea {
        border: none;
        outline: none;
        resize: none;
        background: @background_deep;
        font-size: 16px;
        line-height: 1.5;
      }

      .main-input-text {
        margin-top: 10px;
        margin-bottom: 10px;
        height: 96px;
        width: 100%;
        overflow: scroll;
        overflow-x: hidden;
        outline: none
      }

      .limit {
        margin-right: 10px;
        font-size: small;
        color: @menuText_gray;
      }

      .main-input-button {
        height: 30px;
        width: 90px;
        line-height: 30px;
        text-align: center;
        background-color: @background;
        border: 1px solid @borderBase;
        border-radius: 4px;
      }

      .main-input-button:hover {
        cursor: default;
      }

      .main-input-button-active {
        background-color: @menuColor;
        color: @menuText_light;
      }

      .main-input-button-active:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
